<template>
	<div>
		<van-nav-bar title="资讯头条 - 登录界面" />
		<van-form @submit="onSubmit">
			<van-field required v-model="user.mobile" name="mobile" label="手机号" placeholder="请输入手机号"
				:rules="[{ pattern: /^1[3-9]\d{9}$/, required: true, message: '请填写手机号' }]" />

			<van-field required v-model="user.code" name="code" type="password" label="密码" placeholder="请填写6位密码"
				:rules="[{ pattern: /^\d{6}$/, required: true, message: '请填写密码' }]" />
			<div style="margin: 16px;">
				<van-button round block type="info" loading-text="正在加载中..." :loading="isLoading"
				:disabled="isLoading" native-type="submit">登录
				</van-button>
			</div>
		</van-form>
	</div>
</template>

<script>
import { loginAPI } from '@/api/index'
import { setToken } from '@/utils/token.js'
import { setStorage } from '@/utils/storage'
import Notify from '@/ui/Notify'
export default {
  name: 'LoginCompont',
  data () {
    return {
      user: {
        mobile: '13888888888', // 手机号
        code: '246810' // 验证码(密码-必须是246810后台规定s的, 无论手机号是什么)
      },
      isLoading: false// 登录按钮-加载状态
    }
  },
  methods: {
    async onSubmit (value) {
      this.isLoading = true
      try {
        const res = await loginAPI(this.user)
        Notify({ type: 'success', message: '登录成功!!' })
        console.log(res)
        setToken(res.data.data.token)
        setStorage('refresh_token', res.data.data.refresh_token)
        this.$router.replace({
          path: this.$route.query.path || '/layout/home'
        })
      } catch (error) {
        console.log(error)
      }
      this.isLoading = false
    }
  }
}
</script>

<style scoped lang="less">
.van-nav-bar {
	background-color: #007bff;

	::v-deep .van-ellipsis {
		color: white;
		font-size: 18px;
	}
}
</style>
